<template>
  <div style="display: flex;flex-direction: column;align-items: center;" v-loading="loading">
    <canvas ref="bigPriDev" :width="canvaswidth" :height="canvasheight" v-if="showCanvas" :style="`height:calc(${canvasheight} * 0.7);width:calc(${canvaswidth} * 0.7);border: 1px solid #eee;`"></canvas>
    <!-- <div style="display: flex;justify-content: space-around;" v-if="cameraDuble">
        <canvas ref="bigPriDev" width="640" height="480" style="height: 240px ;width: 320px;"></canvas>
        <canvas ref="bigPriDev2" width="640" height="480" style="height: 240px ;width: 320px;"></canvas>
    </div> -->
    
    <div style="margin-top: 24px;">
        <el-button @click="takePhotos" type="primary">拍照</el-button>
        <el-button @click="changevideo" type="primary">切换摄像头</el-button>
        <el-button @click="big" type="primary">放大</el-button>
        <el-button @click="small" type="primary">缩小</el-button>
        <el-button @click="Fnsplit(1)" type="primary">开启自动裁切(默认开启)</el-button>
        <el-button @click="Fnsplit(0)" type="primary">关闭自动裁切</el-button>
        <!-- <el-button @click="cameraDuble = !cameraDuble">摄像头双开关</el-button> -->

    </div>
  </div>
</template>

<script>
import Altimeter from './index.js'
export default {
    props:['propsCamear'],
    data(){
        return {
            cameraDuble:true,
            rotateNum:0,
            canvaswidth:'640px',
            canvasheight:'480px',
            showCanvas:true,
            loading:true,
        }
    },  
    // created(){
    //     if(this.propsCamear.field_id!='photo'){
    //         this.canvaswidth = '640px'
    //         this.canvasheight = '480px'
    //     }else{
    //         this.canvaswidth = '413px'
    //         this.canvasheight = '579px'
    //     }
    // },
    mounted () {
        this.showCanvas=true
        
        Altimeter.createWebSocket(this.$refs.bigPriDev)
        // Altimeter.StartVideo(this.$refs.bigPriDev)
        let a = setInterval(()=>{
            this.loading=Altimeter.getloading()
            if(!this.loading){
                clearInterval(a)
            }
        },200)
    },
    beforeDestroy(){
        this.showCanvas=false
        Altimeter.StopVideo()
        Altimeter.resetparameter()
        Altimeter.closeWebSocket()
    },
    methods:{
        changevideo(){
            // this.showCanvas=false
            if(Altimeter.getcamera()==1){
                this.canvaswidth = '640px'
                this.canvasheight = '480px'
            }else{
                this.canvaswidth = '413px'
                this.canvasheight = '579px'
            }
            Altimeter.changeCamera(this.canvaswidth,this.canvasheight) 
        },
        takePhotos(){
            Altimeter.takePhotos()
            var time = setTimeout(() => {
                Altimeter.StopVideo()
                let url = Altimeter.getphtots()
                if(Altimeter.getcamera()==1){
                    url = this.$refs.bigPriDev.toDataURL('image/png');
                }
                this.$emit('takePhotos',{...this.propsCamear,url})
                clearTimeout(time)
            }, 1000);
        },
        big(){
            Altimeter.big()
        },
        small(){
            Altimeter.small()
        },
        rotate(){
            if(this.rotateNum==3){
                this.rotateNum=-1
            }
            this.rotateNum++
            Altimeter.rotate(this.rotateNum)
        },
        Fnsplit(num){
            Altimeter.Fnsplit(num)
        }
    }
}
</script>

<style>

</style>